<template>
    <div class="box">
        <headers title="购物车"></headers>

        <template v-if="list.length > 0">

            <van-swipe-cell v-for="(v, i) in list" :key="i">

                <van-card :price="v.goods_price" :title="v.goods_name" thumb="">
                    <template #thumb>
                        <div style="display: flex;">
                            <van-checkbox v-model="v.checked">复选框</van-checkbox>

                            <lazy-component>
                                <img style="width: 6rem;height: 6rem;"  v-lazy="v.goods_big_logo ? v.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />
                            </lazy-component>

                            <!-- <img style="width: 6rem;height: 6rem;"
                                :src="v.goods_big_logo ? v.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                alt="" srcset=""> -->
                        </div>
                    </template>
                    <template #footer>
                        <van-button size="mini" @click="delFun(i)">删除</van-button>
                        <van-stepper v-model="v.num" />
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" @click="delFun(i)" class="delete-button" />
                </template>
            </van-swipe-cell>
        </template>

        <template v-else>
            <van-empty description="暂无数据" />

        </template>

        <div style="height: 10rem;"></div>

        <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkedAll">全选</van-checkbox>
            
        </van-submit-bar>




    </div>
</template>

<script setup>
import { ref ,computed} from 'vue'
import headers from '@/components/headers.vue';

// 购物车取值渲染
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()

let list = ref(store.shopCar)

// ================================删除功能
const delFun = (i) => {
    list.value.splice(i, 1)
}

// ===============================提交订单
const onSubmit = () => showToast('点击按钮');

// ==============================全选功能
const checkedAll = computed(() => {
  return list.value.every((v)=>v.checked)
})

// ==============================小计功能
const price = computed(() => {
    // 声明一个变量 初始值位0
  let sum=0;
  list.value.forEach((v)=>{
    // 循环数组 判断 是否选中商品 选中再计算
    if(v.checked){
        sum+=v.num*v.goods_price;
    }
  });
  return sum*100
})
</script>

<style lang="scss" scoped>
.box {
    overflow: auto;
}

.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}
.van-submit-bar{
    bottom: 5rem;
}
</style>